<template>
    <view class="nova-list-item" :class="[compClass ? compClass : 'nova-pref-wrapper']">
        <slot name="icon"></slot>
        <view class="left">{{ title }}</view>
        <view class="right" :class="[arrow ? 'arrow-right' : '']">
            <slot name="text"></slot>
            <slot name="arrow"></slot><block v-if="type == 'input'">
                <input :type="inputType" :placeholder="placeholder" class="pref-input" :style="inputStyle" :value="value" :name="name" @input="_input" />
            </block>
            <block v-if="type == 'textarea'">
            	<textarea :placeholder="placeholder" class="pref-ta" :style="inputStyle" :value="value" @input="_input">
            	</textarea>
            </block>
            <block v-if="type == 'text'">
                <view class="pref-input">
                    <text v-if="value" :style="inputStyle">{{ value }}</text>
                    <text v-else class="input-placeholder placeholder">{{ placeholder }}</text>
                </view>
            </block>
            <block v-if="type == 'city'">
                <view class="pref-input" @tap.stop="showMulLinkageTwoPicker">
                    <text v-if="pickerText" :style="inputStyle">{{ pickerText}}</text>
                    <text v-else class="input-placeholder placeholder">{{ placeholder }}</text>
                </view>
                <mpvue-picker
                    :themeColor="themeColor"
                    ref="mpvuePicker"
                    :mode="mode"
                    :deepLength="deepLength"
                    :pickerValueDefault="pickerValueDefault"
                    @onConfirm="onConfirm"
                    @onCancel="onCancel"
                    :pickerValueArray="pickerValueArray"
                ></mpvue-picker>
            </block>
            <block v-if="type == 'area'">
                <view class="pref-input" @tap.stop="showMulLinkageThreePicker">
                    <text v-if="pickerText" :style="inputStyle">{{ pickerText}}</text>
                    <text v-else class="input-placeholder placeholder">{{ placeholder }}</text>
                </view>
                <mpvue-city-picker
                    :themeColor="themeColor"
                    ref="mpvueCityPicker"
                    :pickerValueDefault="cityPickerValueDefault"
                    @onCancel="onCancel"
                    @onConfirm="onConfirm"
                ></mpvue-city-picker>
            </block>
        </view>
        <slot />
    </view>
</template>

<script>
// https://github.com/zhetengbiji/mpvue-picker
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
// https://github.com/zhetengbiji/mpvue-citypicker
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import cityData from '@/common/city.data.js';
export default {
    components: {
        mpvuePicker,
        mpvueCityPicker
    },
    name: 'nova-pref-pick',
    props: {
        title: {
            type: String,
            default: 'title'
        },
        arrow: {
            type: Boolean,
            default: false
        },
        compClass: {
            type: String,
            default: 'nova-pref-wrapper'
        },
        inputType: {
            type: String,
            default: 'text'
        },
        inputStyle: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'text'
        },
        name: {
            type: String,
            default: ''
        },
        value: {
            type: String | Array,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            prefInputClass: 'pref-input',
            mulLinkageTwoPicker: cityData,
            cityPickerValueDefault: [0, 0, 1],
            themeColor: '#007AFF',
            pickerText: '',
            mode: '',
            deepLength: 1,
            pickerValueDefault: [0],
            pickerValueArray: []
        };
    },
    mounted: function() {
        if (this.value) {
            this.pickerText = this.value;
        }
    },
    methods: {
        _input(e) {
            e.target.name = this.name;
            this.$emit('input', e);
        },
        // 二级联动选择
        showMulLinkageTwoPicker() {
            this.pickerValueArray = this.mulLinkageTwoPicker;
            this.mode = 'multiLinkageSelector';
            this.deepLength = 2;
            this.pickerValueDefault = [0, 0];
            this.$refs.mpvuePicker.show();
        },
        // 三级联动选择
        showMulLinkageThreePicker() {
            this.$refs.mpvueCityPicker.show();
        },
        onConfirm(e) {
            e.name = this.name;
            console.log(e);
            this.$emit('onPick', e);
            this.pickerText = e.label;
        },
        onCancel(e) {
            console.log(e);
        }
    },
    onBackPress() {
        if (this.$refs.mpvuePicker.showPicker) {
            this.$refs.mpvuePicker.pickerCancel();
            return true;
        }
        if (this.$refs.mpvueCityPicker.showPicker) {
            this.$refs.mpvueCityPicker.pickerCancel();
            return true;
        }
    },
    onUnload() {
        if (this.$refs.mpvuePicker.showPicker) {
            this.$refs.mpvuePicker.pickerCancel();
        }
        if (this.$refs.mpvueCityPicker.showPicker) {
            this.$refs.mpvueCityPicker.pickerCancel();
        }
    }
};
</script>

<style lang="scss">
.nova-pref-wrapper {
    height: 80rpx;
    padding: 0rpx 20rpx;
}

.nova-list-item {
    .right {
        flex: 1;
        display: inline-flex;
        box-sizing: border-box;
        .pref-input {
            width: 100%;
            text-align: right;
            margin-right: 0upx;
            min-height: 1.4rem;
            line-height: 1.4rem;
        }

        .placeholder {
            min-height: 1.4rem;
            line-height: 1.4rem;
        }
    }
    .arrow-right {
        .pref-input {
            margin-right: 20upx;
        }
    }
}
</style>
